﻿import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import '../../common/common.css';
import './selectMsgType.css';
import sms from '../../imgs/sms.png';
import weChat from '../../imgs/wechat.png';
import qq from '../../imgs/qq.png';
import email from '../../imgs/email.png';
import { setMsgType } from '../actions'
import * as msgTypes from './messageTypes'

class Messager extends Component {
    static propTypes = {
        active: PropTypes.bool.isRequired,
        onClick: PropTypes.func,
        image: PropTypes.string,
        text: PropTypes.string
    }
    render() {
        var classes = `msg-type ${this.props.active ? 'active-type' : ''}`
        return (
            <div className={classes}
                onClick={() => this.props.onClick && this.props.onClick()} >
                <div className='msg-img-box'>
                    <img className={`msg-img ${!this.props.onClick ? 'disabled-msg':''}`} src={this.props.image} alt={this.props.text}></img>
                </div>
                <div className={this.props.active ? 'msg-text-box active-text' : 'msg-text-box'}>{this.props.text}</div>
            </div>
        )
    }
}
class MessagerSelector extends Component {
    static propTypes = {
        msgType: PropTypes.string.isRequired,
        toggleMsgType: PropTypes.func.isRequired
    }
    render() {
        return (
            <div className='block'>
                <div className='block-title'>选择消息类型：</div>
                <div className='block-content-box type-selector'>
                    <Messager image={sms} text='短消息'
                        active={this.props.msgType === msgTypes.sms}
                        onClick={() => this.props.toggleMsgType(msgTypes.sms)}
                    />
                    <Messager image={weChat} text='weChat'
                        active={this.props.msgType === msgTypes.weChat}
                    />
                    <Messager image={qq} text='qq'
                        active={this.props.msgType === msgTypes.qq} 
                    />
                    <Messager image={email} text='email'
                        active={this.props.msgType === msgTypes.email}
                    />
                </div>
            </div>
        )
    }
}

const mapState2Props = state => ({ msgType: state.send.msgType || msgTypes.sms });

const mapDispatch2Props = dispatch => ({ toggleMsgType: mt => dispatch(setMsgType(mt)) });

export default connect(mapState2Props, mapDispatch2Props)(MessagerSelector);